<template>
    <div>
        <div class="container">
<!--            头像+信息+设置-->
            <div class="users">
<!--                头像+信息-->
                <div class="users-info">
                    <div class="photo">
                        <img id="imgbase" alt="头像">
                    </div>
                    <div class="users-data">
                        <div class="userId">
                            {{uname}}
                        </div>
                        <div class="usingDays">
                            你的包裹就是你的财富～
                        </div>
                    </div>
                </div>
<!--                设置-->
                <div class="settings" @click="toSettings">
                    <span class="iconfont">&#xe781;</span>
                    <div>设置</div>
                </div>
            </div>
<!--            我的卡券+亲友+寄件记录-->
            <div class="users-items">
                <div class="tips">
<!--                    我的卡券-->
                    <div class="mycard" @click="toMyCard">
                        <div class="num">{{myCard}}</div>
                        <div class="tips-title">我的卡券</div>
                    </div>
<!--                    我的亲友-->
                    <div class="myfriends" @click="toMyFriends">
                        <div class="num">{{myFriends}}</div>
                        <div class="tips-title">我的亲友</div>
                    </div>
<!--                    寄件记录-->
                    <div class="sendPackage" @click="toSendRecord">
                        <div class="icons">
                            <span class="iconfont">&#xe6b8;</span>
                        </div>
                        <div class="tips-title">寄件记录</div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</template>

<script>
export default {
    name: "userMine-info",
    data(){
        return{
            myCard: 0,
            uname: '',
            imgbase: ''
        }
    },
        props: ['myFriends'],
    methods:{
        toSettings(){
            this.$router.push('/settings');
        },
        toMyCard(){
            this.$router.push('/myCard');
        },
        toMyFriends(){
            this.$router.push('/myFriends');
        },
        toSendRecord(){
            this.$router.push('/sendRecord');
        }
    },
    mounted() {
        let _this = this;
        _this.uname = window.sessionStorage.getItem('uname');
        let imgbase = window.sessionStorage.getItem('imgbase');
        document.getElementById('imgbase').setAttribute('src', imgbase);
    },
    created() {
        let uname = window.sessionStorage.getItem('uname');
        if (uname == null) {
            this.$router.push('/login');
        }
    }
}
</script>

<style lang="scss" scoped>
    /*引入图标*/
    @import url("../../assets/userIconFont/iconfont.css");
    .container{
        background-image: linear-gradient(to left, aqua, #2f8cff);
        height: 400px;
        .users{
            padding: 70px 20px 0 20px;
            display: flex;
            justify-content: space-between;
            .users-info{
                display: flex;
                justify-content: center;
                align-items: center;
                .photo{
                    padding: 5px;
                    background-color: #0082bd;
                    border-radius: 80px;
                    border: 7px solid #0082bd;
                    width: 100px;
                    height: 100px;
                    img{
                        width: 100px;
                        border-radius: 50%;
                    }
                }
                .users-data{
                    margin-left: 10px;
                    line-height: 40px;
                    .userId{
                        color: white;
                        font-size: 30px;
                    }
                    .usingDays{
                        color: white;
                        font-size: 10px;
                    }
                }
            }
            .settings{
                color: white;
                span{
                    font-size: 50px;
                }
                p{
                    font-size: 10px;
                }
            }
        }
        .users-items{
            color: white;
            margin-top: 20px;
            .tips{
                padding: 0 20px;
                .mycard{
                    padding: 0 20px 0 0;
                    margin: 10px 0 50px 0;
                    display: inline-block;
                    border-right: 1px solid white;
                    .num{
                        text-align: center;
                        font-size: 30px;
                    }
                }
                .myfriends{
                    padding: 0 20px 0  20px;
                    margin: 10px 0 50px 0;
                    display: inline-block;
                    border-right: 1px solid white;
                    .num{
                        text-align: center;
                        font-size: 30px;
                    }
                }
                .sendPackage{
                    padding: 0 20px 0  20px;
                    margin: 10px 0 50px 0;
                    display: inline-block;

                    .icons{
                        text-align: center;
                        span{
                            font-size: 30px;
                        }
                    }
                }
            }
        }

    }

</style>